<template>
  <view class="index">
    <preview-image
      ref="popupComponent"
      :imagePreviewExample="imagePreviewExample"
    />

    <!-- <cover-view class="imagePreviewBox" v-if="imagePreviewExample !== ''">
      <view class="close">
        <i class="uni-btn-icon"></i>
      </view>
      <view class="imageBox">
     
        <cover-image :src="imagePreviewExample"></cover-image>
      </view>
    </cover-view> -->
    <!-- <image
          style="width: 100vw; height: 50%"
          :src="imagePreviewExample"
          mode="aspectFit"
        ></image> -->
    <!-- <custom-header :title="'烟包陈列识别'" />  @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"  :scroll-top="scrollTop"-->
    <scroll-view :scroll-y="true" class="scroll-Y" style="flex: 1">
      <canvas-control
        id="canvasControl"
        :selectData="getInfoData"
        @changeSwitch="onChangeSwitch"
        @fullScreen="OnFullScreen"
      />
      <swiper-image
        ref="canvasFrame"
        :swiperData="swiperData"
        :boxSwitch="boxSwitch"
        :postUrl="postUrl"
        :threshold="0.2"
        @swiperData="onSwiperData"
        @swiperDataIndex="onSwiperDataIndex"
        @selectIndex="onSelectIndex"
        @collectData="onCollectData"
      />
      <!-- <pack-info v-if="getCollData" :collData="getCollData" /> -->
      <rate-info
        collapseTitle="品牌上柜率"
        :collData="getCollData.brandLoadRate"
      />
      <rate-info
        collapseTitle="规格上柜率"
        :collData="getCollData.typeLoadRate"
      />
    </scroll-view>
    <custom-bottom @images="uploadImage"></custom-bottom>
  </view>
</template>

<script>
import Vue from "vue";
// import CustomHeader from "@/components/header/header.vue";
import CanvasControl from "@/components/canvasControl/index.vue";
import SwiperImage from "@/components/swiperImage/index.vue";
import PackInfo from "@/components/packInfo/index.vue";
import RateInfo from "@/components/rateInfo/index.vue";
import CustomBottom from "@/components/bottom/index.vue";
import PreviewImage from "@/components/previewImage/index.vue";
// #ifdef H5
import example1 from "./example1";
import example2 from "./example2";
// #endif

export default Vue.extend({
  components: {
    // CustomHeader,
    CustomBottom,
    CanvasControl,
    SwiperImage,
    PackInfo,
    RateInfo,
    PreviewImage
  },
  data() {
    return {
      title: "Hello",
      rateData: [],
      collData: [
        {
          name: "四川中烟",
          count: "16",
          rateCount: "10"
        }
      ],
      swiperData: [],
      swiperDataIndex: 0,
      selectDataIndex: 0,
      boxSwitch: true,
      imagePreviewExample: "",
      postUrl: ""
    };
  },
  mounted() {
    // #ifdef H5
    this.postUrl = "/api/cv/image/lw/kc/predict";
    this.swiperData = [example1, example2];
    // #endif
    // #ifdef MP-WEIXIN
    this.postUrl = "https://containeriden.ai-paas.com/cv/image/lw/kc/predict";
    // #endif
  },
  computed: {
    getInfoData() {
      if (this.swiperData.length > 0)
        return this.swiperData[this.swiperDataIndex].data[this.selectDataIndex];
      else return [];
    },
    getCollData() {
      if (this.swiperData.length > 0)
        if ("collectData" in this.swiperData[this.swiperDataIndex]) {
          return this.swiperData[this.swiperDataIndex].collectData;
        } else {
          return [];
        }
      else return [];
    }
  },
  methods: {
    uploadImage(swiperDatas) {
      this.swiperData.push(swiperDatas);
    },
    onSwiperData(swiperData) {
      this.swiperDataIndex = swiperData.index;
      this.$set(this.swiperData[swiperData.index], "data", swiperData.dataList);
    },
    onSelectIndex(index) {
      this.selectDataIndex = index;
    },
    onSwiperDataIndex(index) {
      this.swiperDataIndex = index;
    },
    collectData(dataList) {
      let lineCount = 0;
      let brandCount = 0;
      let brandTempArr = [];
      let typeTempArr = [];
      let boxCount = dataList.length;
      let tagCount = dataList.length;
      let boxAskew = dataList.length;
      let boxLost = dataList.length;
      let tagLost = dataList.length;
      let brandLoadRate = [];
      let typeLoadRate = [];

      dataList.forEach((element) => {
        // let brand =smk[0]
        // let type=
        if (element.row > lineCount) lineCount = element.row;
        if (element.name) {
          let smk = element.name.split("_");
          brandTempArr.push(smk[0]);
          typeTempArr.push(element.name);
        }
      });
      let rateCompute = (tempArr, index, isSplit = true) => {
        let arr = [];
        tempArr.forEach((name) => {
          let count = 0;
          dataList.forEach((item) => {
            if (item.name) {
              if (isSplit) {
                let smk = item.name.split("_");
                if (name === smk[index]) {
                  count++;
                }
              } else {
                if (name === item.name) {
                  count++;
                }
              }
            }
          });
          arr.push({
            name,
            count,
            rateCount: Math.floor((count / dataList.length) * 10000) / 100
          });
        });
        return arr;
      };
      let tempArr = [...new Set(brandTempArr)];
      brandCount = tempArr.length;

      brandLoadRate = rateCompute(tempArr, 0);
      tempArr = [...new Set(typeTempArr)];
      typeLoadRate = rateCompute(tempArr, 1, false);
      return {
        lineCount,
        brandCount,
        boxCount,
        tagCount,
        boxAskew,
        boxLost,
        tagLost,
        brandLoadRate,
        typeLoadRate
      };
    },
    onCollectData(data) {
      this.$set(
        this.swiperData[data.index],
        "collectData",
        this.collectData(data.dataList)
      );
    },
    onChangeSwitch(status) {
      this.boxSwitch = status;
    },
    async OnFullScreen() {
      let imageExample = await this.$refs.canvasFrame.onFullScreen();

      // #ifdef H5
      this.$refs.popupComponent.open();
      this.imagePreviewExample = imageExample;
      // #endif
      // #ifdef MP-WEIXIN
      uni.previewImage({
        urls: [imageExample]
      });
      // #endif
    }
  }
});
</script>

<style lang="scss" scoped>
.index {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-Y {
  flex: 1;
  overflow: scroll;
  white-space: nowrap;
}

.flex {
  height: calc(100% - 44rpx - 100rpx);
  flex-direction: column;
}
</style>
